<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="./css/global.css" rel="stylesheet" />
		<link href="./css/footer.component.css" rel="stylesheet" />
		<link href="./css/film.component.css" rel="stylesheet" />
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/film.js"></script>
		<script type="text/javascript">
			$(document).ready(() => {
				$.ajax({
					url: './data/category_list.json',
					dataType: 'json',
					success(data) {
						//---------------分类-------------------------
						let div = ``;
						data.forEach(val => {
							div +=
								`<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red film-click">${val.category_name}</div>`;
						});
						$('.category').append(div);
						//---------------列表-------------------------	
						let filmList = null;
						$.ajax({
							url: './data/film_list.json',
							dataType: 'json',
							success(film_list) {
								filmList = film_list;
								let a = ``;
								film_list.forEach(val => {
									a += fn(val);
								});
								$('.filmList').empty();
								$('.filmList').append(a);
							}
						});
						//绑定鼠标单击事件
						let categoryName = null;
						$('.film-click').click(function() {
							categoryName = $(this).html();
							let a = ``;
							filmList.forEach(val => {
								//val 电影对象
								//categoryList 电影对象的分类数据（数组）
								let categoryList = val.category_list;
								let flag = false;
								categoryList.forEach(function(c) {
									if (c.category_name === categoryName) {
										flag = true;
									}
								});

								if (flag) {
									a += fn(val);
								}
							});
							$('.filmList').empty();
							$('.filmList').append(a);
						})
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="app" data-v-app="">
			<div class="container d-flex justify-between"><img src="img/logo.png" class="mr-2 align-self-center"
					style="height: 50px;">
				<div class="mr-auto d-flex"><a href="./首页.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">首页</a><a
						href="./film_list.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-red text-white">电影</a><a
						href="./cinema_list.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">影院</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">演出</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">榜单</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">热点</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">商城</a>
				</div>
				<div class="align-self-center d-flex mr-3"><input type="text"
						class="py-2 px-3 rounded-left outline-0 border-red-1" placeholder="找影视剧、影人、影院"><button
						class="text-white bg-red bg-hover-light-red py-2 px-3 outline-0 border-0 rounded-right"> 搜 索
					</button></div><a href="./login.html"
					class="align-self-center text-sm text-gray text-decoration-none text-hover-red mr-3"> 你好，请登录 </a><a
					href="./regist.html" class="align-self-center text-sm text-red text-decoration-none"> 免费注册 </a>
			</div>
			<div class="container my-4">
				<div class="shadow rounded px-3">
					<div class="d-flex align-items-start border-bottom py-2">
						<div class="text-muted text-sm px-2 my-1 py-1 w-4"> 类型： </div>
						<div class="d-flex flex-wrap w-96 category">
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-white bg-red"> 全部 </div>
						</div>
					</div>
					<div class="d-flex align-items-start border-bottom py-2">
						<div class="text-muted text-sm px-2 my-1 py-1 w-4"> 区域： </div>
						<div class="d-flex flex-wrap w-96">
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-white bg-red">全部</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">大陆</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">美国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">韩国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">日本</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">中国香港</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">中国台湾</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">泰国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">印度</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">法国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">英国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">俄罗斯</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">意大利</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">西班牙</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">德国</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">波兰</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">澳大利亚</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">新西兰</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">其他</div>
						</div>
					</div>
					<div class="d-flex align-items-start border-bottom py-2">
						<div class="text-muted text-sm px-2 my-1 py-1 w-4"> 年代： </div>
						<div class="d-flex flex-wrap w-96">
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-white bg-red"> 全部 </div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2022</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2021</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2020</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2019</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2018</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2017</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2016</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2015</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2014</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2013</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2012</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2011</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2010</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2009</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2008</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2007</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2006</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2005</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2004</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2003</div>
							<div class="text-sm hand py-1 px-2 rounded my-1 mx-2 text-gray text-hover-red">2002</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="mt-3 d-flex flex-wrap align-items-start filmList"></div>
			</div>
			<div class="footer-background">
				<div class="container footer">
					<div class="footer-left">
						<div class="footer-left-column">
							<div class="footer-primary">学掌门院线</div>
							<div class="footer-secondary">中国影迷使用得更多的院线平台</div>
							<div class="footer-secondary">学掌门平台打造的<span class="orange">"影视神器"</span></div>
							<div class="footer-secondary"><span class="orange">60,000</span> 多个专业分类</div>
							<div class="footer-secondary"><span class="orange">600,000</span> 多个影视资源</div>
							<div class="footer-secondary"><span class="orange">760,000,000</span> 多条影评</div>
							<div class="footer-secondary"><span class="orange">38,000</span> 多个影院</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">关于我们</div>
							<div class="footer-secondary">关于学掌门</div>
							<div class="footer-secondary">隐私政策</div>
							<div class="footer-secondary">院线平台服务协议</div>
							<div class="footer-secondary">网络信息侵权通知指引</div>
							<div class="footer-secondary">学掌门院线服务监督员</div>
							<div class="footer-secondary">网站地图</div>
							<div class="footer-secondary">联系我们</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">Vip服务</div>
							<div class="footer-secondary">院线攻略 免费体验</div>
							<div class="footer-secondary">影院问答 评估指南</div>
							<div class="footer-secondary">专业咨询 海量片源</div>
							<div class="footer-secondary">偏好设置 随机抽奖</div>
							<div class="footer-secondary">自动评论 账单统计</div>
							<div class="footer-secondary">消费分析 APP下载</div>
							<div class="footer-secondary">诱惑活动 发现更多</div>
						</div>
					</div>
					<div class="footer-right">
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门APP </div>
							<div class="footer-right-primary"> 扫描立即下载 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 订阅号 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 官方服务号 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
